<template>
  <view class="home">
    <view class="card_item user_info_box">
      <view class="content">
        <image src="../../static/logo.png"></image>
        <view class="user_info">
          <view class="nick_name">昵称: 13888888888</view>
          <view class="prev">
            上级代理: 138888888
            <u-icon name="grid"></u-icon>
          </view>
        </view>
      </view>
      <view class="member">
        <view class="ordinary_member">
          <u-icon name="integral-fill" color="#d2c011"></u-icon>
          <view>普通会员</view>
        </view>
        <view class="join_member">加入会员</view>
      </view>
    </view>

    <view class="system_item">
      <view>系统公告 |</view>
      <view class="announcement">
        <view class="content">会员朋友们：各位的代码上传至121212</view>
      </view>
    </view>

    <view class="card_item">
      <view class="header">
        <view class="h_left">
          <u-icon name="grid"></u-icon>
          <text class="text">积分</text>
        </view>
        <view class="h_right">兑换</view>
      </view>
      <view class="content">
        <view class="integral_text">
          <view class="blue_text text">50.98</view>
          <view class="su_text">已确认</view>
        </view>

        <view class="line"></view>

        <view class="integral_text">
          <view class="red_text text">20.65</view>
          <view class="su_text">待确认</view>
        </view>
      </view>
      <view class="bottom_b"></view>
    </view>

    <view class="card_item user_info_box">
      <view class="header">
        <view class="h_left"><u-icon name="grid"></u-icon><text class="text">入库统计</text></view>
      </view>
      <view class="content">

        <view class="integral_text">
          <view class="red_text text">0</view>
          <view class="su_text">今日入库</view>
        </view>

        <view class="line"></view>

        <view class="integral_text">
          <view class="blue_text text">28</view>
          <view class="su_text">总入库</view>
        </view>
      </view>
      <view class="grey_line"></view>

      <view class="content">

        <view class="integral_text">
          <view class=" text">0</view>
          <view class="su_text text_color">小盒入库</view>
        </view>

        <view class="line"></view>

        <view class="integral_text">
          <view class=" text">28</view>
          <view class="su_text text_color">条盒入库</view>
        </view>

        <view class="line"></view>

        <view class="integral_text">
          <view class=" text">28</view>
          <view class="su_text text_color">出售数量</view>
        </view>
      </view>
    </view>

    <view class="bottom_total">
      <view class="top_title">
        <u-icon name="grid"></u-icon>
        <view>总入库条数排行(已售出不显示)</view>
      </view>

      <view class="bgc">
        <view class="data_item" v-for="(item, index) in totalList" :key="index" :style="{backgroundColor: item.color }">
          <view>{{ item.name }}</view>
          <view>共{{ item.quantity }}条</view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalList: [
        {
          name: '黄山 (红方音新中支)',
          quantity: 6,
          color: '#fad6da'
        },
        {
          name: '黄山 (小红方印) 中支',
          quantity: 3,
          color: '#fff1ca'
        },
        {
          name: '黄山 (刘三姐)',
          quantity: 3,
          color: '#ccf4fc'
        },
        {
          name: '黄山 (刘三姐) 11',
          quantity: 3,
          color: '#fff'
        },
      ]
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.home {
  background-color: #fff;
  padding: 30rpx;

  .card_item {
    background-color: #fff;
    margin-bottom: 40rpx;
    border-radius: 40rpx;
    box-shadow: 0rpx 8rpx 20rpx #e9e5e5;

    .content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 20rpx 0rpx;

      image {
        width: 80rpx;
        height: 80rpx;
      }

      .prev {
        display: flex;
        background-color: #f9fafc;
        border-radius: 60rpx;
        padding: 10rpx;
        padding-left: 30rpx;
        padding-right: 20rpx;
      }

      .integral_text {
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          font-size: 36rpx;
          font-weight: 600;
        }

        .blue_text {
          color: #0470f8;
        }

        .red_text {
          color: #e74154;
        }

        .su_text {
          color: #888a8c;
          font-size: 24rpx;
          margin-top: 20rpx;
        }

        .text_color {
          color: #000;
        }
      }

      .line {
        height: 80rpx;
        width: 4rpx;
        background-color: #e5e5e5;
      }
    }

    .member {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      background-color: #20232a;
      color: #eeeff0;
      border-top-right-radius: 20rpx;
      border-top-left-radius: 20rpx;

      .ordinary_member {
        display: flex;

        view {
          margin-left: 10rpx;
        }
      }

      .join_member {
        background-color: #e1ad71;
        border-radius: 30rpx;
        padding: 10rpx 20rpx;
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;

      .h_left {
        display: flex;

        .text {
          margin-left: 10rpx;
          font-weight: 600;
        }
      }

      .h_right {
        color: #a0a0a0;
        font-size: 24rpx;
      }
    }

    .bottom_b {
      height: 20rpx;
      padding-bottom: 20rpx;
    }

    .grey_line {
      height: 4rpx;
      background-color: #e5e5e5;
      /* background-color: red; */
      margin: 20rpx 0rpx;
    }
  }

  .system_item {
    display: flex;
    margin-top: 20rpx;
    margin-bottom: 40rpx;
    background-color: #cbe3ff;
    border: 5rpx solid #b6d3f7;
    padding: 10rpx;
    border-radius: 8rpx;
    color: #3d78cd;

    .announcement {
      width: 70%;
      overflow: hidden;
      margin-left: 4rpx;

      .content {
        white-space: nowrap;
        animation: roll 5s linear infinite;
      }
    }

    @keyframes roll {
      0% {
        transform: translateX(760rpx);
      }

      100% {
        transform: translateX(-100%);
      }
    }
  }

  .bottom_total {
    margin-top: 20rpx;

    .top_title {
      display: flex;
      font-size: 24rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
    }

    .data_item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      font-weight: 600;
    }
    
  }

}
</style>
